<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <p>{{ foo }}</p>
            <!-- 这里的 `foo` 不会更新！ -->
            <button v-on:click="foo = 'baz'">Change it</button>
        </div>
        <script type="text/javascript">

            var obj = {
                foo: 'bar'
            }

            // 阻止修改现有的属性，如修改会报错TypeError: Cannot assign to read only property
            Object.freeze(obj)

            // 该对象被加入到一个 Vue 实例中
            var vm = new Vue({
                el: '#app',
                data: obj
            })
        </script>
    </body>
</html>